<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml"  xmlns:th="http://www.thymeleaf.org">
<head th:include="_header_include::frag(~{::title},~{::link},~{})">
    <title>后台管理系统</title>
    <link rel="stylesheet" th:href="@{/css/custom/login/login.css}">
</head>
<body>
    <div id="Loading">
        <div class="loader-inner ball-beat">
            <div></div>
            <div></div>
            <div></div>
        </div>
    </div>
    <div id="loginbox" class="loginbox">
            <div class="control-group normal_text">忘记密码-找回密码</div>
            <el-form :model="resetPwdForm" :rules="rules" ref="resetPwdForm" class="demo-resetPwdForm" >
                <el-row>
                    <el-form-item  prop="username">
                      <span class="iconImg"><img th:src="@{/images/loginIco01.jpg}" alt=""></span>
                      <el-input v-model="resetPwdForm.username" maxlength="30"  placeholder="输入登录用户名"></el-input>
                    </el-form-item>
                </el-row>
                <el-row>
                    <el-col :span="14">
                        <el-form-item  prop="codeInput">
                          <span class="iconImg"><img th:src="@{/images/loginIco03.jpg}" alt=""></span>
                          <el-input v-model="resetPwdForm.codeInput" maxlength="6"  placeholder="输入验证码"></el-input>
                        </el-form-item>
                    </el-col>
                    <el-col :span="10">
                    	<el-button type="primary" class="codeBtn" @click="sendCode('resetPwdForm','2');" :disabled="isDisabled">{{buttonName}}</el-button>
                    </el-col>
                </el-row>
                        
                <div class="control-group">
                    <div class="codeTip">
                        未收到验证码，使用<span class="link">
                          <el-button class="msgBtn" type="submit" id="msgHref" :disabled="isDisabled" @click="sendCode('resetPwdForm','1');">短信验证码</el-button>
                          <!-- <a id="msgHref" type="submit" @click="sendCode('resetPwdForm','1');">短信验证码</a> -->
                        </span>
                    </div>              
                </div>
                <el-row>
                    <el-form-item  prop="pswInput1">
                      <span class="iconImg"><img th:src="@{/images/loginIco02.jpg}" alt=""></span>
                      <el-input type="password" v-model="resetPwdForm.pswInput1" maxlength="30"  placeholder="新密码（6-30位，数字和字母组合）"></el-input>
                      <!-- <span class="iconImg iconRight"><img th:src="@{/images/loginIco04.jpg}" alt=""></span> -->
                    </el-form-item>
                </el-row>
                <el-row>
                    <el-form-item  prop="pswInput2">
                      <span class="iconImg"><img th:src="@{/images/loginIco02.jpg}" alt=""></span>
                      <el-input type="password" v-model="resetPwdForm.pswInput2" maxlength="30"  placeholder="确认新密码"></el-input>
                      <!-- <span class="iconImg iconRight"><img th:src="@{/images/loginIco04.jpg}" alt=""></span> -->
                    </el-form-item>
                </el-row>
            </el-form>
            <div class="control-group">
                <!-- 提示语 -->
                <div class="tipBox">
                    <div class="tipCntBox" id="errorSpan"></div>
                </div>              
                <!-- 提示语结束 -->
                <div class="loginBtnBox">
                  <el-row :gutter="20">
                    <el-col :span="14">
                      <el-button class="resetBtn" type="primary" @click="submitForm('resetPwdForm')">提&nbsp;&nbsp;交</el-button>
                    </el-col>
                    <el-col :span="10">
                      <el-button class="cancelBtn" @click="toLogin()">取&nbsp;&nbsp;消</el-button>
                    </el-col>
                  </el-row>
                </div>
            </div>
    </div>
</body>
<!-- import common js-->
<div th:include="_footer_include :: #jsLib"></div>
<script>
var vm =  new Vue({
        el: '#loginbox',
        data: {
          buttonName: "获取语音验证码",
          isDisabled: false,
          time: 60,
        	resetPwdForm: {
        		username: '',
                codeInput:'',
                pswInput1:'',
                pswInput2:''
            },
            rules: {
            	username: [
                    { required: true, message: '用户名不能为空', trigger: 'blur' },
                  	{  max: 30, message: '最大30个字符', trigger: 'blur' },
                  	{ validator:function(rule,value,callback){
                 
                    if(/^[A-Za-z0-9]+$/.test(value) == false){
                       callback(new Error("请输入数字和字母"));
                    }else{
                       callback();
                    } 
                    callback();
                      
                    }, trigger: 'change'}
                ],
                pswInput1: [
                  { required: true, message: '密码不能为空', trigger: 'change' },
                  {  max: 30, message: '最大30个字符', trigger: 'blur' },
                  {  min: 6, message: '最少6个字符', trigger: 'blur' },
                  { validator:function(rule,value,callback){
                 
                    if(/^[A-Za-z0-9]+$/.test(value) == false){
                       callback(new Error("请输入数字和字母"));
                    }else{
                       callback();
                    } 
                    callback();
                      
                    }, trigger: 'change'}
                ],
                pswInput2: [
                  { required: true, message: '密码不能为空', trigger: 'change' },
                  {  max: 30, message: '最大30个字符', trigger: 'blur' },
                  {  min: 6, message: '最少6个字符', trigger: 'blur' },
                  { validator:function(rule,value,callback){
                 
                    if(/^[A-Za-z0-9]+$/.test(value) == false){
                       callback(new Error("请输入数字和字母"));
                    }else{
                       callback();
                    } 
                    callback();
                      
                    }, trigger: 'change'}
                ],
                codeInput: [
                  { required: true, message: '验证码不能为空', trigger: 'change' },
                  {  max: 6, message: '最大6个字符', trigger: 'blur' },
                  { validator:function(rule,value,callback){
                 
                    if(/^[0-9]*$/.test(value) == false){
                       callback(new Error("请输入数字"));
                    }else{
                       callback();
                    } 
                    callback();
                      
                   }, trigger: 'change'}
                ],
              },         
        },
        
        methods: {
        	submitForm(formName) {
       	        this.$refs[formName].validate((valid) => {
       	          if (valid) {
    	             var formData = vm.resetPwdForm;
    	             if(formData.pswInput1!=formData.pswInput2){
    	            	$("#errorSpan").text("确认密码与设置密码不一致，请修改");
 	            		$("#errorSpan").show();
 	            		return;
    	             }
    	             var param={};
    	             param.username= formData.username;
    	             param.oldPassword = formData.pswInput1;
    	             param.code = formData.codeInput;
    	             console.info(param);
    	             
    	            axios.post("/login/updatePassword", param)
    	            .then(function (response) {
    	            	console.info(response);
    	            	var data =response.data;
    	            	if(data.code!="0"){
    	            		$("#errorSpan").text(data.msg);
    	            		$("#errorSpan").show();
    	            	}else{
    	            		vm.$message({message:'密码找回成功，请使用新密码重新进行登录',type:'success',duration:1000,onClose:function(){
	    	                	document.location.href='/login';
                      	    }});
    	            	}
    	            })
    	            .catch(function (error) {
    	                 console.log(error);
    	            });
    	             
       	          } else {
       	        	console.log('数据未通过校验！');
       	            return false;
       	          }
       	        });
       	      },
       	   	  sendCode(formName,type) {
       	    	var valid=true;
	       	  	this.$refs[formName].validateField(["username"],(error) => {
  	    	      if (error) {
  	    	    	  valid=false;
	       	      }
   	          	});
  	       	 	if (valid) {
  	       	 		vm.isDisabled = true;
  	    		    var formData = vm.resetPwdForm;
		            var param={};
		            param.username= formData.username;
		            param.type = type;
		            console.info(param);
		            axios.post("/login/sendmsgPwd", param)
		 	           .then(function (response) {
		  	       	 		vm.isDisabled = false;
		 	           		console.info(response);
		 	            	var data =response.data;
		 	            	var msg="";
	 	            		if(data.code=="0"){
	 	            			vm.cutDown();//倒计时
		 	            		if(type=="1"){
		 	            			msg="发送短信验证成功";
		 	            		}else{
		 	            			msg="请注意接听语音来电获取验证码！";
		 	            		}
		 	            	}else {
	    						msg=data.msg;
	    					}
	 	            		$("#errorSpan").text(msg);
	 	            		$("#errorSpan").show();
		 	            })
		 	            .catch(function (error) {
		  	       	 		vm.isDisabled = false;
		 	                 console.log(error);
		 	            });
	       	     }else {
	   	        	console.log('数据未通过校验！');
	   	            return false;
	   	          }
       	      },
       	   	  toLogin() {
       	    	document.location.href='/login';
       	      },
              cutDown() {
                var me = this;
                me.isDisabled = true;
                var interval = window.setInterval(function() {
                  me.buttonName = '重新发送('+me.time+')';
                  --me.time;
                  if(me.time < 0) {
                    me.buttonName = "获取语音验证码";
                    me.time = 60;
                    me.isDisabled = false;
                    window.clearInterval(interval);
                  }
                }, 1000);
       
              }
        },
        created() {  
            document.body.removeChild(document.getElementById('Loading'));
            if (this.$refs['resetPwdForm']!==undefined) {
        		this.$refs['resetPwdForm'].resetFields();
        	}
        }
    })
</script>
</html>